/**
 * 展示文件信息的卡片列表
 * 
 */

import React, { useState } from 'react';
import styles from './index.module.less';
import { FILR_TYPE } from './constants';
import WxImageViewer from 'react-wx-images-viewer';
import { GetFileUrl } from '@/services/index';
import PreviewPdf from '@/components/preview-pdf';
import { Toast } from 'antd-mobile-v2';

const getFileSizeString = (size) => {
  if (!size) return '';
  if (size > 800 * Math.pow(2, 10)) {
    return `${Math.floor(size / Math.pow(2, 20) * 100) / 100}Mb`;
  }
  return `${Math.floor(size / Math.pow(2, 10) * 100) / 100}Kb`;
};

const getFileType = (file) => {
  let fileType = '';
  const type = file.name.match(/.([a-z]+)$/i)?.[1];
  switch (type) {
    case 'png':
    case 'jpg':
    case 'jpeg':
    case 'gif':
    case 'bmp': fileType = FILR_TYPE.IMG; break;
    case 'pdf': fileType = FILR_TYPE.PDF; break;
    case 'pptx':
    case 'ppt': fileType = FILR_TYPE.PPT; break;
    case 'docx':
    case 'doc': fileType = FILR_TYPE.WORD; break;
    case 'xls':
    case 'xlsx': fileType = FILR_TYPE.EXCEL; break;
    case 'zip': fileType = FILR_TYPE.PACKAGE; break;
    default: fileType = FILR_TYPE.OTHER;
  }
  return fileType;
};

export interface Props {
  list: any[];
}

const FileCardList: React.FC<Props> = (props) => {
  const { list = [] } = props;
  const [previewVisible, setPreviewVisible] = useState<boolean>(false);
  const [images, setImages] = useState<any[]>([]);
  const [previewPdfVisible, setPreviewPdfVisible] = useState<boolean>(false); // pdf预览
  const [pdfUrl, setPdfUrl] = useState(''); // pdf文件url
  const [previewIndex] = useState<number>(0);

  const handleFileClick = async (file) => {
    const type = getFileType(file);
    if (type === FILR_TYPE.IMG) {
      console.log('预览图片');
      const res = await GetFileUrl({ id: file.id, device: 'H5' });
      file.url = res.data;
      setImages([file]);
      setPreviewVisible(true);
      return;
    } if (type === FILR_TYPE.PDF) {
      const res = await GetFileUrl({ id: file.id, device: 'H5' });
      setPdfUrl(res.data);
      setPreviewPdfVisible(true);
      return;
    } else {
      Toast.info('暂不支持此类型文件预览');
    }
  };

  const handleCancelPreview = () => {
    setPreviewVisible(false);
  };

  // 关闭pdf预览
  const closePreviewPdf = (data) => {
    setPreviewPdfVisible(data);
  };

  return (
    <div className={styles.list}>
      {
        list.map((item: any) => (
          <div
            className={styles.cardItem}
            key={item.id}
            onClick={() => handleFileClick(item)}
          >
            <img className={styles.fileType} src={getFileType(item)} />
            <div className={styles.fileInfo}>
              <span className={styles.fileName}>{item.originName}</span>
              <span className={styles.fileSize}>{getFileSizeString(item.fileSize) || '未知大小'}</span>
            </div>
          </div>
        ))
      }
      {
        previewVisible ? <WxImageViewer onClose={handleCancelPreview} urls={images.map((item) => item.url)} index={previewIndex} /> : null
      }
      {/* 预览pdf文件 */}
      {previewPdfVisible && <PreviewPdf pdfUrl={pdfUrl} closePreviewPdf={(data) => closePreviewPdf(data)} />}
    </div>
  );
};

export default FileCardList;